@import '../Styles/abstracts/_media-queries.scss';
@import '../Styles/abstracts/_bit-css-variables.scss';

::deep {
    .scr-container {
        padding-inline-end: 0.5rem;

        img {
            padding: 0.5rem;
            max-width: 256px;
        }

        pre {
            margin: 0;
            overflow: auto;
            scrollbar-width: thin;

            code {
                display: block;
                width: fit-content;
                padding: 0.5rem 1rem;
                border-radius: 0.25rem;
                background: $bit-color-background-secondary;
            }
        }
    }

    .panel-cnt {
        top: $bit-env-inset-top;
        bottom: $bit-env-inset-bottom;
        height: $bit-env-height-available;
    }

    .open-panel-button {
        padding: 0;
        inset-inline-end: 2rem;

        &:hover, &:active {
            background-color: transparent;
        }

        @include lt-md {
            inset-inline-end: 1rem;
        }

        img {
            width: 2.5rem;
            height: 2.5rem;
            pointer-events: none;
        }
    }

    .body {
        width: 600px;
        max-width: 100%;
    }

    .body {
        width: 600px;
        max-width: 100%;
    }

    .user-message {
        align-self: end;
        padding: 0.5rem 1rem;

        pre {
            white-space: pre-wrap;
            word-break: break-all;
        }
    }

    .default-prompt-container {
        @include gt-xs {
            flex-flow: row !important;
        }
    }

    .default-prompt-button {
        height: 100%;
    }

    .send-message-button {
        left: unset;
        right: unset;
        inset-inline-end: 0.5rem;

        i {
            font-size: 1rem;
        }
    }
}
